<template>
    <div class="app-container" v-loading='loading'>
        <part-comp title="查看详情" showback class="mb_15"/>
        <div class="m_15">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="type!=1?12:24" :xl="type!=1?12:24">
                    <div class="whitebg detailbox flex">
                        <div class="leftimg">
                            <img src="@/assets/images/avatar.png" alt="">
                        </div>
                        <!-- 历史资源 -->
                        <div v-if="type==6" class="itemcontent">
                            <div class="username">{{datail.resource?datail.resource.user_login:"-"}}</div>
                            <div class="checkitem flex">
                                <span >提交时间：{{datail.task?datail.task.create_time:'-'}}</span>
                            </div>
                            <el-tooltip class="item"  v-if="datail.task&&datail.task.msg" effect="dark" :content="datail.task.msg" placement="top-start" popper-class='deleteclass'>
                                <div class="remark overflowtext">备注:{{datail.task.msg||'-'}}</div>
                            </el-tooltip>
                            <div class="remark overflowtext" v-else>备注:{{datail.task.msg||'-'}}</div>
                        </div>
                        <div v-else class="itemcontent">
                            <div class="username">{{datail.resource?datail.resource.user_login:"-"}}</div>
                            <div class="checkitem flex">
                                <span>审核状态：{{datail.status_name}}</span>
                                <span class="mltime">提交时间：{{datail.create_time}}</span>
                            </div>
                            <el-tooltip class="item"  v-if="datail.user_msg" effect="dark" :content="datail.msg" placement="top-start" popper-class='deleteclass'>
                                <div class="remark overflowtext">备注:{{datail.msg||'-'}}</div>
                            </el-tooltip>
                            <div class="remark overflowtext" v-else>备注:{{datail.msg||'-'}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="type!=1">
                    <div class="whitebg detailbox flex">
                        <div class="leftimg">
                            <img src="@/assets/images/check.png" alt="">
                        </div>
                        <div class="itemcontent">
                            <div class="username">审批人员：{{datail.admin?datail.admin.user_login:"-"}}</div>
                            <div class="checkitem flex">
                                <span v-if="type==6">审核时间：{{datail.create_time||'-'}}</span>
                                <span v-else>提交时间：{{datail.admin?datail.last_time:'-'}}</span>
                            </div>
                            <el-tooltip class="item" v-if="datail.msg" effect="dark" :content="datail.msg" placement="top-start" popper-class='deleteclass'>
                                <div class="remark overflowtext">审核详情：{{datail.msg||'-'}}</div>
                            </el-tooltip>
                            <div v-else class="remark overflowtext">审核详情：{{datail.msg||'-'}}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="whitebg mt_15">
                <div class="boxtitle"><span class="line"></span>清单明细</div>
                <el-table v-loading="loading"
                    :data="list"
                    class="whitetable">
                    <!-- <el-table-column label="序号" prop="id" >
                        <template slot-scope="scope">
                            <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="用户名" prop="user_login" >
                        <template slot-scope="scope">
                            <span class="">{{scope.row.resource?scope.row.resource.user_login:'-'}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="公众号" prop="user_login" >
                        <template slot-scope="scope">
                            <span class="">{{scope.row.author||'-   '}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="地区">
                        <template slot-scope="scope">
                            <span >{{ scope.row.province?scope.row.province:'-' }}{{ scope.row.city?'-'+scope.row.city:''}}{{ scope.row.area?'-'+scope.row.area:'' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="地区级别">
                        <template slot-scope="scope">
                            <span>{{scope.row.level_name||'-'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题">
                        <template slot-scope="scope">
                            <span >{{ scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接">
                    <template slot-scope="scope">
                        <a class="comm_link" v-if="scope.row.url" :href="scope.row.url" target="_blank">点击跳转</a>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="活动链接">
                    <template slot-scope="scope">
                        <a class="comm_link" v-if="scope.row.user_url" :href="scope.row.user_url" target="_blank">点击跳转</a>
                        <span v-else>-</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="活动时间">
                    <template slot-scope="scope">
                        <span v-if="Array.isArray(scope.row.tp_arr)&&scope.row.tp_arr.length">{{ parseTime(scope.row.tp_arr[0],'{y}-{m}-{d}') }} - {{parseTime(scope.row.tp_arr[1],'{y}-{m}-{d}') }}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="活动提醒时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.remind_time=='1970-01-01'?'-':scope.row.remind_time}}</span>
                    </template>
                </el-table-column>
                    <el-table-column label="申请时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.create_time||'-'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="活动类型">
                        <template slot-scope="scope">
                            <span>{{scope.row.class_name||'-'}}</span>
                        </template>
                    </el-table-column>
                    <!-- 历史资源没有状态 -->
                    <el-table-column label="状态" v-if="type!==6">
                        <template slot-scope="scope">
                            <div><span class="primarydot"></span>{{scope.row.status_name}}</div>
                            <!-- <div v-if="scope.row.user_status==1" ><span class="primarydot"></span>正常</div>
                            <div v-else><span class="primarydot reddot"></span>禁用</div> -->
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="活动票数">
                        <template slot-scope="scope">
                            <span>{{scope.row.num}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="主办方">
                        <template slot-scope="scope">
                            <span v-if="scope.row.cosponsor&&scope.row.cosponsor.length">
                                <span v-for="(item,index) in scope.row.cosponsor" :key="index">{{item.co_sponsor}}{{index+1==scope.row.cosponsor.length?'':','}}</span>
                            </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="协办方">
                        <template slot-scope="scope">
                            <span>{{scope.row.sponsor?scope.row.sponsor.sponsor:'-'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="活动联系人">
                        <template slot-scope="scope">
                            <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].username}}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].phone}}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="whitebg mt_15" v-if="type!=2&&type!=3&&type!=6">
                <div class="boxtitle"><span class="line"></span>审核</div>
                <el-form  label-width="80px" label-position="top" class="p_20">
                    <!-- <el-form-item label="审核详情信息:" prop="remark" v-if="type!=1">
                        <el-input v-model="datail.msg" type="textarea" rows="5" readonly placeholder="审核详情" />
                    </el-form-item> -->
                    <!-- 查看 -->
                    <!-- <el-form-item v-if="type=='detail'">
                        <el-button type="primary" @click="onSubmit">再次提交</el-button>
                        <el-button>取 消</el-button>
                    </el-form-item> -->
                    <!-- 审核 -->
                    
                    <el-form-item v-if="type==1"> 
                        <!--  v-if="datail.type==1" -->
                        <el-button type="primary" @click="onSubmit">补充信息加入历史库</el-button>
                        <el-button class="" @click="handleNocheck">审核不通过</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- <el-dialog title="补充信息" :close-on-click-modal='false' :visible.sync="editdialog" top="5vh" width="820px" append-to-body>
            <res-dialog v-if="editdialog" @close='handleClose' :type="type" :rowinfo='rowinfo'/>
        </el-dialog> -->

        <!-- 资源待审核点击补充信息加入历史库  的补充 -->
        <el-drawer title="补充信息"
            class="mydrawercontent"
            :visible.sync="editdialog"
            direction="rtl"
            size='50%'
            :before-close="handleCloseInfo">
            <res-dialog v-if="editdialog" @close='handleCloseInfo'  :rowinfo='datail'/>
        </el-drawer>
        <!-- 资源待审核点击审核  审核不通过 -->
        <el-dialog title="审核不通过" :close-on-click-modal='false' :visible.sync="undodialog" width="620px" append-to-body>
            <el-form :model="form" ref="reForm" :rules="rules" label-width="80px" label-position="top" >
                <el-form-item label="审核意见:" prop="msg">
                    <el-select v-model="text" size="small" clearable @change="selectText" placeholder="不限" >
                        <el-option
                            v-for="dict in textList"
                            :key="dict"
                            :label="dict"
                            :value="dict"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核详情:" prop="msg">
                    <el-input v-model="form.msg" type="textarea" rows="5" oninput="if(form.msg.length>400)from.msg=from.msg.slice(0,400)" maxlength="400"
                        show-word-limit placeholder="审核详情" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleclose">取 消</el-button>
                <el-button type="primary" @click="handleNopass">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import { approveCheckinfo } from '@/api/resource';
import {checkinfo,checkinRecly,noPassCheck,checkinHistory,recyleinfo,historyInfo } from '@/api/approval';
import { levelName } from '@/api/datalist';
import ResDialog from '../resource/components/ResDialog.vue';
export default {
    components:{
        PartComp,
        ResDialog
    },
    data(){
        return {
            loading:false,
            detailId:'',
            type:'',//1 待审核 2审核未通过 3审核通过 4回收站 5审批回复查看详情 6历史查看详情
            datail:{},
            list:[],
            form:{
                msg:''
            },
            rules:{
                msg:[{required: true, message: '请输入审核意见', trigger: 'blur'}],
            },
            undodialog:false,
            text:'',
            textList:['信息有误','活动已处理','查找不到'],
            editdialog:false
        }
    },

    created(){
        console.log('type:',this.$route.query);
        let {type,id} = this.$route.query;
        if(type){
            this.type = type;
            this.detailId=id;
        }
        if(id){
            this.getDetail();
        }
    },

    computed: {

        levelName(){
            return levelName
        },

        // titleInfo(){
        //     let info = '';
        //     if(this.type == 6){
        //         info='历史资源查看详情'
        //     }else if(this.type == 5){
        //         info='历史资源查看详情'
        //     }
        // },
    },

    methods:{
        
        getDetail(){
            this.loading=true;
            // console.log('---');
            if(this.type == 4){
                // 回收站详情
                recyleinfo({id:this.detailId}).then(res=>{
                    if(res.code == 1){
                        if(res.data){
                            this.datail=res.data;
                            this.list = [{...res.data,level_name:levelName(res.data.active_level)}];
                        }
                    }
                    this.loading=false;
                })
            }else if(this.type == 5){
                // 审批回复详情
                approveCheckinfo({id:this.detailId}).then(res=>{
                    if(res.code == 1){
                        if(res.data){
                            this.datail=res.data;
                            this.list = [{...res.data,level_name:levelName(res.data.active_level)}];
                        }
                    }
                    this.loading=false;
                })
            }else if(this.type == 6){
                // 历史详情
                historyInfo({id:this.detailId}).then(res=>{
                    if(res.code == 1){
                        if(res.data){
                            this.datail=res.data;
                            this.list = [{...res.data,level_name:levelName(res.data.active_level)}];
                        }
                    }
                    this.loading=false;
                })
            }else{
                checkinfo({id:this.detailId}).then(res=>{
                    if(res.code == 1){
                        this.datail=res.data;
                        // 结构数据，并且替换 level_name 数字对应的中文名称
                        this.list = [{...res.data,level_name:levelName(res.data.active_level)}];
                    }
                    this.loading=false;
                })
            }
            
        },

        handleCloseInfo(type){
            if(type==1){
                this.getDetail();
            }
            this.editdialog = false
        },

        goBack(){
            this.$router.back();
        },

        selectText(val){
         this.form.msg.length>=400||this.form.msg.length+val.length>=400? this.form.msg = this.form.msg:  this.form.msg=this.form.msg+val
        },

        handleNocheck(){
            this.form.msg = '';
            this.undodialog = true;
        },

        handleclose(){
            this.undodialog = false
        },

        handleNopass(){
            this.$refs.reForm.validate(valid=>{
                if(valid){
                    noPassCheck({msg:this.form.msg,id:this.detailId}).then(res=>{
                        this.$message.success('提交成功');
                        this.goBack();
                    })
                }
            })
        },
        
        onSubmit(){
           this.editdialog=true;
        },
        // onSubmit(type){
        //     if(type == 1){
        //         checkinRecly({id:this.datail.id}).then(res=>{
        //             if(res.code == 1){
        //                 this.$message.success('提交成功');
        //                 this.goBack();
        //             }
        //         })
        //     }else{
        //         checkinHistory({id:this.datail.id}).then(res=>{
        //             if(res.code == 1){
        //                 this.$message.success('提交成功');
        //                 this.goBack();
        //             }
        //         })
        //     }
        // }
    }
}
</script>

<style lang="scss" scoped>
.detailbox{
    width: 100%;
    padding: 15px 30px 10px;
}
.leftimg{
    width: 60px;
    height: 60px;

    img{
        width: 100%;
        height: 100%;
    }
}
.itemcontent{
    width: calc(100% - 80px);
    margin-left: 25px;
    &>div{
        margin-bottom: 5px;
    }

    .username{
        font-size: 16px;
        font-weight: 500;
    }

    .checkitem,.remark{
        width: 100%;
        color: #8E8E8E;
        font-size: 14px;
    }
    .mltime{
        display: inline-block;
        margin-left: 6%;
    }
}
.boxtitle{
    color: #DD8341;
    font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    .line{
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #DD8341;
        margin-right: 10px;
    }
}
</style>